<template>
	<el-scrollbar :style="{ maxHeight:isTabInner?'calc(100vh - 200px)':'calc(100vh - 150px)'}">
		<div class="dIndex">
			<div v-if="hasSearch">
				<!-- 顶部搜索栏 -->
				<Search :tableData="tableData" @handleSearch="tableData.searchCb" @handleReset="tableData.reset" />
			</div>
			<div style="display: flex; align-items: center;margin-top:10px ;" class="m-t28" v-if="tableData.handleBtns.length !== 0">
				<!--其他操作按钮  -->
				<HandleBtns :tableData="tableData" @handleFixedDialog="handleFixedDialog" @handleShowedDialog="handleShowedDialog" />
				<!-- :uploadUrl="uploadUrl" @handleBeforeUpload="beforeAvatarUpload" @handleAvatarSuccess="handleAvatarSuccess"  -->
			</div>
			<!-- <div style="position: sticky;top: 0;z-index: 999;background-color: green;">我是test吸顶内容</div> -->
			<div style="flex: 1; display: flex; padding-bottom: 40px" class="m-t12">
				<Table :tableData="tableData" @selected-items="handleSelectedItems" />
			</div>
			<div style="display: flex; justify-content: right; position: absolute; bottom: 0px; left: 0px; right: 0px; z-index: 9; background-color: white;padding: 5px 12px 0 0;" v-if="pagination">
				<Pagination :tableData="tableData" />
			</div>
			<Form v-if="tableData.form.formShow" :tableData="tableData" />
		</div>
	</el-scrollbar>
	<!-- 此处插入fixed弹窗 -->
	<FixedDialog v-if="showFixedDialog" :tableData="tableData" @closeFixeDialog="showFixedDialog = false" @changeTabelData="changeTabelData"></FixedDialog>
	<!-- 此处插入show弹窗 -->
	<ShowedDialog v-if="showShowedDialog" :tableData="tableData" @closeShowedDialog="showShowedDialog = false" @changeTabelData="changeTabelData"> </ShowedDialog>
</template>

<script setup>
import { ref, defineProps, watch, nextTick, onMounted } from "vue";
import Search from "./components/Search.jsx";
import HandleBtns from "./components/HandleBtns.jsx";
import Table from "./components/Table.jsx";
import Pagination from "./components/Pagination.jsx";
import Form from "./components/Form.jsx";
import FixedDialog from "./components/FixedDialog.vue";
import ShowedDialog from "./components/ShowedDialog.vue";
const props = defineProps({
	tableData: {
		type: Object,
		default: () => {
			return {};
		},
	},
	// 是否是tab页内
	isTabInner:{
		type: Boolean,
		default: false
	},
	pagination: {
		type: Boolean,
		default: true,
	},
	hasSearch: {
		type: Boolean,
		default: true,
	},
	uploadUrl: {
		type: String,
		default: "",
	},
});
const tableData = ref(props.tableData);
const uploadUrl = ref(props.uploadUrl);
const showFixedDialog = ref(false);
const showShowedDialog = ref(false);
const emits = defineEmits(["selected-items"]);
const changeTabelData = async (obj) => {
	props.tableData.clums = obj;
	console.log(900, obj);
	await nextTick();
	showFixedDialog.value = false;
	showShowedDialog.value = false;
};
const handleSelectedItems = (val) => {
	emits("selected-items", val);
};
// const beforeAvatarUpload = (val) => {
// 	emits("handleBeforeUpload", val);
// };
// const handleAvatarSuccess = (val) => {
// 	emits("handleAvatarSuccess", val);
// };
const handleFixedDialog = () => {
	showFixedDialog.value = true;
};
const handleShowedDialog = () => {
	showShowedDialog.value = true;
};
onMounted(() => {
	console.log("列表:",props.tableData);
});
</script>

<style lang="scss">
.dIndex {
	// calc(100vh - 150px)
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	// overflow-y: scroll;
	padding-right: 8px;
}

//设置滚动条样式
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
::-webkit-scrollbar-track {
	background-color: #f5f5f5;
}
::-webkit-scrollbar-thumb {
	background-color: #c0c4cc55;
	border-radius: 3px;
}

.el-pagination {
	width: 100%;
	// background-color: red;
	display: flex;

	.el-pagination__total {
		flex: 1 !important;
	}
}
</style>
